<template>
  <div>
    <h1>Header </h1>
  <div>我是哥哥我开的车是{{car}}</div>
  <button @click="changecar">点击换车</button>
  </div>
</template>

<script>
/* 
  父子组件生命周期流程:
    - 初始化流程
      父组件的beforeCreate --> 父组件的created --> 父组件的beforeMount
      -->子组件的beforeCreate --> 子组件的created --> 子组件的beforeMount
      -->子组件的mounted-->父组件mounted

    - 更新流程
      - 当子组件没有用到父组件数据的时候(不仅限于props),父组件更新,子组件不会触发任何的更新
      - 当子组件用到了父组件的数据时 父组件beforeUpdate-->子组件beforeUpdate-->子组件updated-->父组件updated

    - 卸载流程
      - 父组件beforeDestroy-->子组件beforeDestroy-->子组件destroyed-->父组件destroyed


*/
export default {
name:'Header',
props:['car','changecar'],

beforeCreate() {
   console.log('*****beforeCreate*****'); 
},
created() {
   console.log('****created****'); 
},
beforeMount() {
   console.log('****beforeMount****');
},
mounted() {
     console.log('****mounted****');
},
beforeUpdate() {
    console.log('****beforeUpdate****');
},
updated() {
     console.log('****updated****');
},
beforeDestroy() {
    console.log('****beforeDestroy****');
},
destroyed() {
    console.log('****destroyed****');
},
}
</script>

<style>

</style>